<template>
	<!-- 权限系统-菜单管理 -->
	<d2-container class="d-flex mod-sys__user flex-column">
		<template v-if="$hasPermission('authority:menu:index')">
			<div class="d-flex j-sb" slot="header">
				<el-form class="d-flex b-s mt-2 mb-10" :inline="true" size="small" :model="dataForm" @keyup.enter.native="getTableList(true)" @submit.native.prevent>
					<el-form-item label="名称">
						<el-input clearable v-model="dataForm.keyword" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="状态">
						<el-select clearable v-model="dataForm.status" placeholder="请选择">
							<el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模块">
						<el-select clearable v-model="dataForm.module_ids" placeholder="请选择" @focus="authorityFocusFn">
							<el-option v-for="(item,index) in modules" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="getTableList(true)">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" @click="addOrUpdateData()" v-show="$hasPermission('authority:menu:create')">新增</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
				</div>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="menuTable" key="menuTable" border height="100%" resizable
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:data="dataList">
							<vxe-column width="80" field="id" title="ID" sortable align="center"></vxe-column>
							<vxe-column width="120" field="name" title="名称" align="center"></vxe-column>
							<vxe-column width="100" field="status_name" title="状态" align="center"></vxe-column>
							<vxe-column width="150" field="model_name" title="模块" align="center"></vxe-column>
							<vxe-column width="150" field="controller" title="控制器" align="center"></vxe-column>
							<vxe-column width="150" field="action" title="动作" align="center"></vxe-column>
							<vxe-column width="180" field="created_at" title="创建时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column width="180" field="updated_at" title="更新时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column v-if="!tableLoading||(dataList.length&&$hasPermissionNum(['authority:menu:update','authority:menu:delete']))" title="操作" fixed="right" 
							:width="$hasPermissionNum(['authority:menu:update','authority:menu:delete'])*100" align="center" cell-class-name="py-10">
								<template v-slot="{ row }">
									<el-button size="small" round icon="el-icon-edit"
									v-if="$hasPermission('authority:menu:update')"
									@click="addOrUpdateData(row, false)" type="primary">编辑</el-button>
									<el-button size="small" round icon="el-icon-delete"
									v-if="$hasPermission('authority:menu:delete')"
									@click="deleteHandleSetter(row)" type="danger">删除</el-button>
								</template>
							</vxe-column>
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page" :page-size="dataForm.pageSize"
					:total="total" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<menu-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog" @refreshDataList="getTableList"></menu-add-or-update>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import MenuAddOrUpdate from './menu-add-or-update'
	import XEUtils from 'xe-utils'
	import {
		type
	} from 'os'
	import store from '@/store/index'
	export default {
		mixins: [mixinViewModule],
		components: {
			MenuAddOrUpdate
		},
		data() {
			return {
				
				tableLoading:false,
				total: 0,
				// 增改弹窗
				addOrUpdateVisible: false,
				status:[
				{
					value:1,
					label:'正常',
				},
				{
					value:0,
					label:'禁用',
				},
				{
					value:2,
					label:'隐藏',
				}],
				modules: [],
				dataForm: {
					page: 1,
					pageSize: 10,
					keyword: '',
					status:'',
					module_ids:''
				},
				dataList: []
			}
		},
		computed: {
		},
		created() {
			if(this.$hasPermission('authority:menu:index')){
				this.getTableList();
			}
		},

		methods: {
			//模块列表
			async authorityFocusFn(){
				const modulesRes = await this.$axios.get('/api/common/module',{})
				this.modules = modulesRes;
			},
			async getTableList(init=false) {
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/authority/menu?'+this.$qs.stringify(this.dataForm));
				this.tableLoading = false;
				if(typeof tableRes == 'object' && tableRes!=null){
					this.total = tableRes.total||0;
					if(Array.isArray(tableRes.data)){
						let tdlen = tableRes.data.length;
						if(tdlen){
							this.dataList = tableRes.data;
							return
						}
					}
				}
				this.dataList = [];
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(row)
				this.addOrUpdateVisible = true;
				if (typeof row == 'object' && row!=null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/authority/menu/update/${id}`,{});
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.menuId = id;
						this.$refs.addOrUpdateDialog.update(userRes);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.menuId = null;
						this.$refs.addOrUpdateDialog.init()
					})
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/authority/menu/delete/${row.id}`,{}
					).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style>
</style>